function popup(source) {
            
		//Change these values to style your modal popup
		var align = 'center';									//Valid values; left, right, center
		var top = 100; 											//Use an integer (in pixels)
		var width = 700; 										//Use an integer (in pixels)
		var padding = 10;										//Use an integer (in pixels)
		var backgroundColor = '#FFFFFF'; 						//Use any hex code
		//var source = sourceIn; 								//Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
		var borderColor = '#333333'; 							//Use any hex code
		var borderWeight = 4; 									//Use an integer (in pixels)
		var borderRadius = 5; 									//Use an integer (in pixels)
		var fadeOutTime = 300; 									//Use any integer, 0 = no fade
		var disableColor = '#666666'; 							//Use any hex code
		var disableOpacity = 40; 								//Valid range 0-100
		var loadingImage = 'loading.gif';		//Use relative path from this page
			
		//This method initialises the modal popup
      
            modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
  		
    }

var urlhost=location.host;

var Media = 
{
        media: {
            "image" : {"internal" : null, "external":null},        
            "audio" : {"internal" : null, "external":null},
            "video" : {"internal" : null, "external":null}
        },
        
		page_size : 12,
		
		pages: {
			"image": {"internal": 0, "external":0},
			"audio": {"internal": 0, "external":0},
			"video": {"internal": 0, "external":0}
		},
	
		totals : {
			"image": {"internal": 0, "external":0},
			"audio": {"internal": 0, "external":0},
			"video": {"internal": 0, "external":0}
		},
		
		first: function (type, location)
		{
			Media.pages[type][location] = 0;
			Media.getMedia(type, location);
		},
		
        prev:  function (type, location)
        {
        	Media.pages[type][location] = Media.pages[type][location] - Media.page_size;
        	//Media.page_pos = Media.page_pos - Media.page_size;
        	Media.getMedia(type, location);
        },
        
        
        next:  function (type, location)
        {
        	Media.pages[type][location] = Media.pages[type][location] + Media.page_size;
        	Media.getMedia(type, location);
        },
        
        getMedia: function (type, location)
        {
            var uri =  "/mws/rest/media/" + type + "/" + location;
            uri += "/?pgStart="+Media.pages[type][location]+"&pgSize="+Media.page_size;
            
            $.ajax({
                type: 'GET',
                url: uri,
                dataType: 'json',
                beforeSend: function(xhr)
                {
                    $("#" + type+"-"+location).empty();
                    $("#" + type+"-"+location).append ("Loading...");
                    return true;
                },
                success: function(response) 
                {
                    Media.media[type][location] = response.media;
                    Media.totals[type][location] = response.total;
                    Media.renderMedia(type, location);
                },
                error: function(xhr, reason, exception) 
                { 
                    $("#" + type+"-"+location).empty();
                    $("#" + type+"-"+location).append("<p class='error'>"+reason+"</p>"+"<p class='error'>"+exception+"</p>");
                    $("#" + type+"-"+location).append ("<p class='error'>Error al obtener la imagen " + type + "! Tal vez i-jetty no se esta ejecutando o hay una falla temporal en la red. Pruebe recargar la pagina.</p>");
                }
            });
            return false; 
        },
        
        getAllMedia: function()
        {
            for (var type in Media.media)
            {
            	for (var location in Media.media[type])
            		Media.getMedia(type,location);
            }
                
        },
        
        renderMedia: function (type, location)
        {
            var lmedia = Media.media[type][location];
            parent = $("#" + type+"-"+location);
            parent.empty ();
            
            html = "";
            
            if (type == "video")
                parent.append ("<ul>");
            
            // inner content
            for (var itemidx in lmedia)
            {
                var item = lmedia[itemidx];
                
                if (type == "image")
                {
                	                   	
                  //  html += "<div ><a  href='/mws/browse/media/" + item.type + "/" + item.location + "/thumb/" + item.id + "' onclick='afoto('/mws/browse/media/" + item.type + "/" + item.location + "/thumb/" + item.id + "','" + item.title + "');return true'>" +
                  //  		"<div class='thumb'>&nbsp;<img src='/mws/browse/media/" + item.type + "/" + item.location + "/thumb/" + item.id + "' alt='" + 
                  //  item.title + "'/>&nbsp;</div></a><p>" + item.title + "</p></div>";
                	
                	var ubicacion="/mws/browse/media/" + item.type + "/" + item.location + "/" + item.id+".jpeg";
                	var ubi="/mws/browse/media/" + item.type + "/" + item.location + "/thumb/" + item.id;
                	var titulo= item.title ;
                   html += "<div class='float'><a target='_blank' href='javascript:popup(\""+ubicacion+"\");'>" +
                   		  "<div class='thumb'>&nbsp;<img src='"+ubi+"' alt='" +titulo + "'/>&nbsp;</div></a>" +
                          "<p>" +titulo+ "</p>"+ 
                           "<p> <div class='fb-like' data-href='"+urlhost+ubicacion+"' data-send='false' data-layout='button_count' data-width='100' data-show-faces='true'></div></p>"+
                          "</div>";
                 //<fb:like layout='button_count' href='"+urlhost+ubicacion+"'></fb:like>
                    
                }
                else if (type == "audio")
                {
                    html += "<div class='float'><a href='/mws/browse/media/" + item.type + "/" + item.location + "/" + item.id + 
                    	  "' ><div class='thumb'>&nbsp;<img src='/mws/audio.png' alt='" + item.title + "'/>&nbsp;</div></a><p>" + (item.title != null && item.title.length > 20 ? item.title.slice(0,20) : item.title);
                    
                    if (item.artist != null || item.album != null)
                        html += "<span class='trackinfo'>";
                    
                    if (item.artist != null)
                    {
                        if (item.artist.length == 0)
                            html += "<br />Unknown Artist";
                        else
                            html += "<br />" + item.artist;
                    }
                    
                    if (item.album != null)
                    {
                        if (item.album.length == 0)
                            html += "<br />Unknown Album";
                        else
                            html += "<br />" + item.album;
                    }
                    
                    if (item.artist != null || item.album != null)
                        html += "</span>";
                    
                    html += "</p></div>";
                } 
                else 
                {
                    html += "<li><a href='/mws/browse/media/" + item.type + "/" + item.location+ "/" + item.id + "'>" + item.title + "</a></li>";
                }
            }
            
            if (type == "video")
                html += "</ul>";
            
            html += "<div class='buttons'>";
            
            var disabled = (Media.pages[type][location] > 0 && Media.media[type][location].length > 0)?"":"disabled";
            html += "<button onclick='Media.first(\""+type+"\",\""+location+"\");'"+disabled+">Primera</button>";
            
            var disabled = (Media.pages[type][location] > 0 && Media.media[type][location].length > 0)?"":"disabled";
            html += "<button  onclick='Media.prev(\""+type+"\",\""+location+"\");' "+disabled+">Anterior</button>";


            disabled = (Media.totals[type][location] > (Media.pages[type][location] + Media.page_size))?"":"disabled";
            html += "<button  onclick='Media.next(\""+type+"\",\""+location+"\");' "+disabled+">Siguiente</button>";
            
            html += "</div>";
            
            parent.append (html);
        },
        
        uploadComplete: function(json) {
            if (json.error != 0) {
                alert ("Failed to upload file to phone: " + json.msg);
                return;
            }
            
            setTimeout(this.finishUpload, 1000);
        },
        
        finishUpload: function() {
            Media.getAllMedia();
            
            $("#fileupload").attr("value", "")
        }
};



$(document).ready (function () {
    Media.getAllMedia();
}); 

function reloadMedia (type) {
    Media.getMedia(type, "internal");
    Media.getMedia(type, "external");
    return false;
}


var titulopordefecto = "mws"; 
var ventana;
var cont=0;

function afoto(cual,titulo){
	if(cont==1){ventana.close();ventana=null}
	if(titulo==null){titulo=titulopordefecto}
	ventana=window.open('','ventana','resizable=yes,scrollbars=no')
	ventana.document.write('<html><head><title>' + titulo + '</title></head><body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">');
	ventana.document.close();
	cont++;
}
function redimensionar(ancho, alto){
	ventana.resizeTo(ancho+12,alto+28);
	ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2); //centra la ventana. Eliminar si no se quiere centrar el popup
}




